<script setup>
const props = defineProps({
  searchData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  searchList: {
    type: Array,
    default: [],
  },
});
const cascaderRef = ref(null);
const emit = defineEmits(['cascaderChange', 'handleQuery', 'resetQuery']);
const cascaderChange = value => {
  const currentObj = cascaderRef.value[0].getCheckedNodes()[0].data;
  cascaderData.value = currentObj;
  emit('cascaderChange', value, currentObj);
};
const handleQuery = () => {
  emit('handleQuery');
};
const resetQuery = () => {
  emit('resetQuery');
};
</script>
<template>
  <el-form v-model="searchData" inline>
    <el-form-item
      v-for="(item, index) in searchList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :label-width="item.labelWidth"
    >
      <el-input
        v-if="item.type == 'input'"
        size="small"
        v-model="searchData[item.prop]"
        :style="{ width: item.width + 'px' }"
        :placeholder="item.placeholder"
        clearable
      ></el-input>
      <el-date-picker
        v-if="item.type == 'daterange'"
        size="small"
        :style="item.style"
        v-model="searchData.dateRange"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-if="item.type == 'month'"
        size="small"
        @change="item.method"
        v-model="searchData.date"
        type="month"
        placeholder="选择月份"
        value-format="yyyy-MM"
      ></el-date-picker>
      <el-select
        v-if="item.type == 'select'"
        size="small"
        v-model="searchData[item.prop]"
        :placeholder="item.placeholder"
        :filterable="item.filterable"
        clearable
      >
        <el-option
          v-for="val in item.statusOptions"
          :key="val[item.selectProps?.value]"
          :label="val[item.selectProps?.label]"
          :value="val[item.selectProps?.value]"
        ></el-option>
      </el-select>
      <el-cascader
        v-if="item.type == 'cascader'"
        ref="cascaderRef"
        v-model="searchData.cascader"
        :props="item.cascaderProps"
        :options="item.cascaderOptions"
        clearable
        :placeholder="item.placeholder"
        size="small"
        @change="cascaderChange"
      ></el-cascader>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
      <el-button size="small" type="primary" plain @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped></style>
